<div style="height:100%;">
    <div class="item" style="width:100%;height:100%;background-color:white;">
        <div class="content" style="height:100%;">
            <div data-dojo-attach-point="tabERG">
                <div data-dojo-attach-point="tabNode1" class="ergTabs">
                    <label>${nls.spillLocation}</label>
                    <div data-dojo-attach-point="drawSpillInfo">
                        <div data-dojo-attach-point="Point" title="${nls.spillLocation}" class="searchFeaturesIcon searchPoint"></div>
                    </div>

                    <br>
                    <div>
                        <label>${nls.calculateBy}</label> <br>
                        <select class="ergControls"
                                data-dojo-attach-point="calculateBy" data-dojo-type="dijit/form/Select"></select>
                    </div>

                    <!-- Chemical or Placard List -->
                    <br><br>
                    <div>
                        <label>${nls.material}</label> <br>
                        <select class="ergControls"  data-dojo-attach-point="materialType"
                                data-dojo-type="dijit/form/Select"></select>
                    </div>

                    <!-- Spill Size -->
                    <br><br>
                    <div>
                        <label>${nls.spillSize}</label> <br>
                        <select class="ergControls"  data-dojo-attach-point="spillSize"
                                data-dojo-type="dijit/form/Select"></select>
                    </div>

                    <!-- Time of Spill -->
                    <br><br>
                    <div>
                        <label>${nls.timeOfSpill}</label> <br>
                        <select class="ergControls"  data-dojo-attach-point="timeOfSpill"
                                data-dojo-type="dijit/form/Select"></select>
                    </div>

                    <!-- Wind Direction Spinner -->
                    <br><br>
                    <label>${nls.windDirection}</label> <br>
                    <input data-dojo-type="dijit/form/NumberSpinner"
                           data-dojo-attach-point="winDirSpinner"
                           value="45"
                           data-dojo-props="smallDelta:1, constraints:{min:0,max:365,places:0}"
                           name="windDir"class="ergControls"
                           data-dojo-attach-event="onChange:onWindDirChange"/>

                    <!-- Lookup wind direction from the nearest WS -->
                    <br><br>
                    <label>OR</label>
                    <button class="btnWindDirection"
                            data-dojo-attach-point="btnWindDirection"
                            data-dojo-attach-event="onclick:onLookupWindInfo">${nls.windDirectionLabel}
                    </button>

                    <br><br><br>

                    <!-- BUTTONS -->
                    <div class="jimu-r-row play-section">
                        <div class="col-1-2">
                            <div class="jimu-btn btn-solve" data-dojo-attach-point="btnSearch"
                                 data-dojo-attach-event="onclick:onSolve">${nls.labelSolve}</div>
                        </div>
                        <div class="col-1-2">
                            <div class="jimu-btn btn-clear" data-dojo-attach-point="btnClear" data-dojo-attach-event="onclick:onClearBtnClicked">${nls.labelClear}</div>
                        </div>
                    </div>
                </div>

                <div data-dojo-attach-point="tabNode2" class="ergTabs">
                    <div data-dojo-attach-point="progressBar" data-dojo-type="dijit/ProgressBar" data-dojo-props='indeterminate:true' style="display:none;"></div>
                    <div class="results-section" data-dojo-attach-point="resultsSection" style="display:none;">
                        <div class="results-header">
                            <div class="chart-title" data-dojo-attach-point="chartTitle"></div>
                            <div class="paging-section">
                                <ul data-dojo-attach-point="pagingUl"></ul>
                            </div>
                        </div>
                        <div class="chart-section">
                            <div class="chart-section-item left-arrow arrow" data-dojo-attach-point="leftArrow"></div>
                            <div class="chart-section-item chart-container" data-dojo-attach-point="chartContainer"></div>
                            <div class="chart-section-item right-arrow arrow" data-dojo-attach-point="rightArrow"></div>
                        </div>
                        <div data-dojo-attach-point="description" style="margin-top:20px;"></div>
                        <div data-dojo-attach-point="totalSum" style="font-weight:bold;text-align:center"></div>
                    </div>
                    <div class="noresults-section" data-dojo-attach-point="noresultsSection">
                        ${nls.noresult}
                    </div>
                </div>

                <div data-dojo-attach-point="tabNode3" class="ergTabs">
                    <div class="resultsList" data-dojo-attach-point="facilitiesListSection" />
                </div>
            </div>
        </div>
    </div>
</div>